<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>


<script type="text/javascript">
	var jsStart = (new Date()).getTime();	
</script>
<style>
.msg-fixed{position:fixed; top:0;  right:0;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head><body>
<h1>Load Images ondemand</h1>
<div><em>This component load images on-scroll event</em>, (thanks to <a href="http://stevesouders.com/">Steve Souder</a> for serves images used on this demo )</div>
<div id="msg" style="height: 300px;"> Try it now scrolling!<br>page load time 4511<br>total page height: 4289px , windows height:609px <br><div class="msg-fixed">current bottom:<span id="current">609</span></div></div>
<br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=0&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=1&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=2&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=3&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=4&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=5&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=6&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=7&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=8&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=9&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=10&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=11&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=12&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=13&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=14&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=15&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=16&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=17&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=18&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=19&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=20&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=21&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=22&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=23&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=24&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=25&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=26&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=27&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=28&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=29&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=30&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=31&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=32&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=33&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=34&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=35&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=36&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=37&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=38&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=39&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=40&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=41&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=42&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=43&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=44&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=45&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=46&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=47&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=48&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=49&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=50&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=51&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=52&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=53&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=54&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=55&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=56&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=57&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=58&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=59&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=60&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=61&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=62&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=63&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=64&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=65&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=66&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=67&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=68&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=69&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=70&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=71&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=72&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=73&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=74&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=75&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=76&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=77&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=78&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=79&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=80&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=81&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=82&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=83&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=84&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=85&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=86&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=87&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=88&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=89&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=90&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=91&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=92&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=93&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=94&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=95&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=96&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=97&t=1253542735" src="pix.gif" height="20" width="20"><br><br>
<img class="img-ondemand" longdesc="http://stevesouders.com/bin/resource.cgi?type=gif&n=98&t=1253542735" src="pix.gif" height="20" width="20"><br><br>


<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">

/**
 * Demo helpers
 */
 
function msg(m){
    $('#msg').append('<br >'+m);
}


// global variables
var _$d = $(document);
var _$w = $(window);
var imgToLoad = 1;

// offset of bottom to load images, on px
var offset = 50;

function imgOndemand(){
	 //calc current scroll position
    var scrollPos = _$w.height() + _$w.scrollTop();
    $('#current').html(scrollPos);

	// get imgs not loaded
	$('img.img-ondemand').each(function(){
		var $img = $(this);
		// filter imgs over scroll limit             
        if($img.offset().top < scrollPos+offset){
			$img.attr('src',$img.attr('longdesc')).removeClass('img-ondemand');
        }
	});
	
	
	imgToLoad = $('img.img-ondemand').length;
		     
	
	
}


$(function(){
	var loadTime =  (new Date()).getTime() - jsStart; 
	msg('page load time '+ loadTime );
    msg('total page height: '+_$d.height()+'px , windows height:'+_$w.height()+'px ');
    msg('<div class="msg-fixed">current bottom:<span id="current">'+_$w.height()+'</span></div>');

    imgOndemand();	
	
});

$(window).scroll(function(){ 
	if (imgToLoad){
		imgOndemand();
	}
});

$(window).unload(function(){	
	if(imgToLoad){
		alert('You save to download '+$('img.img-ondemand').length+' images of '+$('img').length);
	}	
});



</script>
<script type="text/javascript"> 
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script> 
<script type="text/javascript"> 
var pageTracker = _gat._getTracker("UA-10758114-1");
pageTracker._initData();
pageTracker._trackPageview();
</script> 

</body></html>
